解決 WordPress 發佈的問題 |
2007/09/18 ~ 阿亮 ~ |
 |
找到一個方案可以解決長年以來 WordPress 發布問題 
Keywords: tinymce, wordpress virtual editor, code, dreamweaver, nvu…
因為 Web 的 HTML editor 能做的畫面比較有限，所以，我有時會用外部 HTML editor (比如 nvu, dreamweaver 等) 編輯比較複雜的畫面，特別是多張照片並排多張等，然後，拷貝其 HTML Code 到 WordPress HTML code 的部份(下面稱 Code mode)，但是有許多情形，切到 Visual mode，會出現不同原本在外部 editor 的結果。比如下圖，原本一個 Table 的呈現，在 WordPress 的 Visual mode 會不正常呈現。
原因如下圖: 因為許多 editor 內同一個 tag 內容不見得會連續串接在同一行內，所以，table tag 內的 cellspacing, width 等屬性會分布在各行，這在各種 editor 是可以正常處理的，但在 WordPress 的 tinymce editor 卻會不正常處理 (至少到目前 2.2.3 仍有問題)
其實在以前的版本就有此問題了，很早以前就只用 Code mode 在處理而己，但最近的照片整理的文章要和熊協同編輯，發現這個問題實在困擾
後來發現可以用 Tidy
處理此問題（Mac 內建此小程式），原理很簡單，就是串接這些字串，當然，也可以自己手動去串接這些字串，但那可是每次新的文章，就要再做乙次，那可累人啊
下圖是一般 editor 會形成的結果 ， 假設存成 Source.html。
然後，執行下述指令
tidy -i -wrap 2048 -utf8 Source.html > Dest.html
重點即 -wrap 這個可將字串串成 2048 字元，Dest.html 結果就會像下圖，拿這個 HTML Code 貼到 WordPress 的 editor 內即可了。
有了此方式，我現在可以兩個 mode 並用了
另外，最近才知，Wordpress 下要按 Shift-Alt-v (IE) 或 Ctrl-v (Firefox) 其 Virtual editor 有另外的選單，可以用字的顏色等
確定 WordPress ticket #3492 的問題。
在另一篇
，我有改個 Workaround 的檔案。
最近，又被 TinyMCE 煩死了，在於 TinyMCE 內切換 Visual/Code 模式，會發生 <pre> tags 處理不好的情形 !!昏頭!! 根據這篇
，是 {wordpress-dir}/wp-includes/js/tinymce/plugins/wordpress/editor_plugin.js 內 wpautop() 所造成的，Code 裡面都有人註解 Hmm…
天啊～ Visual Editor 好難用啊 !!OMG!!